<template>
  <div class="content pr10">
    <custom-form ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
  </div>
</template>

<script>
import { getDeviceBrandList } from "@/api/system/device/brand";
import { addDeviceFactorData, updateDeviceFactorData } from "@/api/system/device/factors";
import { listDeviceTypesData, getDeviceTypesData, addDeviceTypesData, updateDeviceTypesData, delDeviceTypesData } from '@/api/system/device/types';
import { mapState } from "vuex";
export default {
  name: "DeviceInfo",
  props: {
    formData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
    deviceClassList: {
      type: Array,
      default: () => [],
    },
    ProjectPointPicList: {
      type: Array,
      default: () => [],
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        // 设备系统分类ID(目前指第一级)
        deviceClassifyId: '',
        // 设备类型ID
        deviceTypeId: '',
        // 通讯类型 0:宽带 1:蜂窝(2G/3G/4G/5G) 2:LoRaWAN 3:其他
        communicateType: '',
        // 映射厂商（设备品牌ID）
        deviceBrandId: '',
        // 映射编码（设备品牌编码）
        mapCode: '',
        // 设备ID
        deviceId: '',
        // 设备编码
        deviceCode: '',
        // 设备名称
        deviceName: '',
        // 设备型号
        deviceModel: '',
        // 项目点ID
        projectPointId: '',
        // 项目点名称
        projectPointName: '',
        // 所选项目点的平面图(对应yc_project_point_pic表的ID)
        projectPointPicId: '',
        // 启用状态(0:未启用 1:启用)
        enableStatus: '',
        // 室内还是室外 0:室外 1:室内
        indoor: '',
        // 安装位置
        installPosition: '',
        // 备注
        remark: ''
      },
      // 表单配置项
      formItemConfig: [
        {
          label: "设备分类",
          prop: "deviceClassifyId",
          span: 12,
          filedLabel: "deviceTypeName",
          filedValue: "deviceTypeId",
          component: 'BaseSelect',
          labelWidth: "100px",
          clearable: true,
          onChange: (e) => {
            this.getListDeviceTypesData(this.formModel.deviceClassifyId)
          }
        },
        {
          label: "设备类型",
          prop: "deviceTypeId",
          span: 12,
          filedLabel: "deviceTypeName",
          filedValue: "deviceTypeId",
          component: 'BaseSelect',
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "通讯类型",
          prop: "communicateType",
          span: 12,
          component: "BaseSelect",
          labelWidth: "100px",
          clearable: true,
          // disabled: true,
        },
        {
          label: "映射厂商",
          prop: "deviceBrandId",
          span: 12,
          filedLabel: "deviceBrandName",
          filedValue: "deviceBrandId",
          component: "BaseSelect",
          labelWidth: "100px",
          clearable: true,
          onChange: (e) => {
            // this.formModel.mapCode = e
          }
        },
        {
          label: "映射编码",
          prop: "mapCode",
          span: 12,
          labelWidth: "100px",
          clearable: true,
          // disabled: true,
        },
        {
          label: "设备编码",
          prop: "deviceCode",
          span: 12,
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "设备名称",
          prop: "deviceName",
          span: 12,
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "设备型号",
          prop: "deviceModel",
          span: 12,
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "所属项目点",
          prop: "projectPointName",
          span: 12,
          labelWidth: "100px",
          clearable: true,
          disabled: true,
        },
        {
          label: "平面图",
          prop: "projectPointPicId",
          span: 12,
          filedLabel: "picName",
          filedValue: "projectPointPicId",
          component: "BaseSelect",
          labelWidth: "100px",
          clearable: true,
          onChange: (e, item) => {
            if (item && item.options && item.options.length) {
              let pictrue = item.options.filter(obj => obj.projectPointPicId == e)[0]
              this.$emit("getPictrue", pictrue)
            }
          }
        },
        {
          label: "是否启用",
          prop: "enableStatus",
          span: 12,
          component: "BaseSelect",
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "是否室内",
          prop: "indoor",
          span: 12,
          component: "BaseRadioGroup",
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "安装位置",
          prop: "installPosition",
          span: 24,
          labelWidth: "100px",
          clearable: true,
        },
        {
          label: "备注",
          prop: "remark",
          span: 24,
          labelWidth: "100px",
          clearable: true,
        },
      ],
      // 表单验证
      formRules: {
        deviceClassifyId: {
          required: true,
          message: "设备分类不能为空",
          trigger: "change",
        },
        deviceTypeId: {
          required: true,
          message: "设备类型不能为空",
          trigger: "change",
        },
        communicateType: {
          required: true,
          message: "通讯类型不能为空",
          trigger: "change",
        },
        deviceBrandId: {
          required: true,
          message: "映射厂商不能为空",
          trigger: "change",
        },
        mapCode: {
          required: true,
          message: "映射编码不能为空",
          trigger: "blur",
        },
        deviceCode: {
          required: true,
          message: "设备编码不能为空",
          trigger: "blur",
        },
        deviceName: {
          required: true,
          message: "设备名称不能为空",
          trigger: "blur",
        },
        deviceModel: {
          required: true,
          message: "设备型号不能为空",
          trigger: "blur",
        },
        projectPointName: {
          required: true,
          message: "所属项目点不能为空",
          trigger: "blur",
        },
        projectPointPicId: {
          required: true,
          message: "平面图不能为空",
          trigger: "change",
        },
        enableStatus: {
          required: true,
          message: "是否启用不能为空",
          trigger: "change",
        },
        indoor: {
          required: true,
          message: "是否室内不能为空",
          trigger: "change",
        },
        installPosition: {
          required: true,
          message: "安装位置不能为空",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    ...mapState("dialog", ["dialogTitles"]),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        let formdata = this.formData
        for (let p in this.formModel) {
          let item = formdata[p]
          if (item !== undefined) {
            this.formModel[p] = item
            if (p == "deviceClassifyId" && item) {
              this.getListDeviceTypesData(item)
            }
          }
        }
      },
    },
    deviceClassList: {
      deep: true,
      immediate: true,
      handler() {
        let item = this.formItemConfig.filter(item => item.prop == 'deviceClassifyId')[0]
        this.$set(item, "options", this.deviceClassList)
      }
    },
    ProjectPointPicList: {
      deep: true,
      immediate: true,
      handler() {
        let item = this.formItemConfig.filter(item => item.prop == 'projectPointPicId')[0]
        this.$set(item, "options", this.ProjectPointPicList)
      }
    },
    titleIndex: {
      immediate: true,
      handler() {
        this.formItemConfig.map((item) => {
          if (item.prop == "deviceCode") {
            if (this.titleIndex === "编辑设备") {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          }
        });
      },
    },
  },
  created() {
    this.setDictList();
    this.toGetDeviceBrandList();
  },
  mounted() {
  },
  methods: {
    getList() {
      this.$emit("getList");
    },
    getForm() {
      return this.$refs.form
    },
    validate() {
      this.getForm().validate()
    },
    cancel() {
      this.$emit("cancel");
      // this.$refs["form"].toResetFields();
    },
    submitFrom() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.$utils.isNotEmpty(this.formModel.deviceFactorId)) {
            updateDeviceFactorData(this.formModel).then((res) => {
              if (200 === res.code) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          } else {
            addDeviceFactorData(this.formModel).then((res) => {
              if (200 === res.code) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          }
        }
      });
    },
    // 设置formItemConfig里面的字典列表
    setDictList() {
      if (this.dictMap) {
        // 室内还是室外 0:室外 1:室内
        this.formItemConfig.filter(item => item.prop == 'indoor')[0].options = this.dictMap.type.device_indoor;
        // 是否启用
        this.formItemConfig.filter(item => item.prop == 'enableStatus')[0].options = this.dictMap.type.device_enable_status;
        // 通讯类型
        this.formItemConfig.filter(item => item.prop == 'communicateType')[0].options = this.dictMap.type.device_communicate_type;
      }
    },
    // 获取设备品牌列表
    toGetDeviceBrandList() {
      getDeviceBrandList({}).then(res => {
        if (200 == res.code) {
          this.$set(this.formItemConfig.filter(item => item.prop == 'deviceBrandId')[0], 'options', res.rows)
        }
      })
    },
    // 获取设备类型列表
    getListDeviceTypesData(id) {
      let item = this.formItemConfig[this.formItemConfig.findIndex(item => item.prop == 'deviceTypeId')]
      if (id) {
        listDeviceTypesData({ pid: id }).then(res => {
          if (res && 200 === res.code) {
            if (res.data.length == 0) {
              this.formModel.deviceTypeId = ''
              this.$set(item, "options", [])
            } else {
              !this.formModel.deviceTypeId && (this.formModel.deviceTypeId = res.data[0].deviceTypeId)
              this.$set(item, "options", res.data)
            }
          }
        });
      } else {
        this.formModel.deviceTypeId = ''
        this.$set(item, "options", [])
      }

    }
  },
  components: {},
};
</script>

<style lang="less" scoped>
.content {
  height: 400px;
  overflow: auto;
}
</style>
